<template>
  <div class="interaction-start">
    <crumb />
    <div class="container">
      <div class="box-left">
        <div class="section">
          <div class="title">
            {{mainData.resourceCaseName}}<div v-if="finishedFlag === '0'" class="sm-group"><span class="sm">{{mainData.resourceCaseGroup.resourceCaseGroupNameEn}}</span>  <span class="sm">{{mainData.nodes.length}}个环节</span></div>
          </div>
          <div class="train-info" v-if="finishedFlag !== '0'">
            当前得分：{{mainData.score}} 排名：{{mainData.rank}}
          </div>
          <div class="content">
            {{mainData.caseRequest}}
          </div>
        </div>
        <div class="section">
          <div class="title">
            互动实训环节<span class="arrow" v-if="mainData.stuFinishedNum !== '0'">您已参与{{mainData.stuFinishedNum}}次训练></span>
          </div>
          <div class="card" v-if="mainData.finishedFlag==3">
            <div class="row row-1">
              <div class="name">
                <img src="" alt="">jack
              </div>
              <div class="time">
                2019.6.22 15:15:15
              </div>
            </div>
            <div class="row row-2">
              <div class="score">实训成绩：80分</div>
              <div class="rank">实训排名：17名</div>
            </div>
          </div>
          <div class="list-box">
            <ul>
              <li v-for="(item, index) in mainData.nodes" :key="index" @click="nextFunc(item.id,item.finishedFlag,item.sortIndex)">{{item.caseNodeName}}<span class="right-arrow">{{item.finishedFlag==0?'未开始':''}}{{item.finishedFlag==1?'进行中':''}}{{item.finishedFlag==2?'已完成':''}}></span></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="box-right">
        <!-- 案例背景 -->
        <div class="section" v-if="finishedFlag === '0'||finishedFlag === '2'">
          <div class="title">
            案例背景
            <div class="tab">
              <div class="tab-item" :class="{'active': currentCasebg===item.displayType}" @click="tab(item.displayType)" v-for="(item, index) in mainData.resourceCaseBgList" :key="index">
                <div>
                  {{item.displayType === '1'?'文本':''}}
                  {{item.displayType === '2'?'图片':''}}
                  {{item.displayType === '3'?'音频':''}}
                  {{item.displayType === '4'?'视频':''}}
                </div>
              </div>
            </div>
          </div>
          <template v-for="(item, index) in mainData.resourceCaseBgList">
            <div class="content" :key="index">
              <!-- 文本 -->
              <div class="media-box" v-if="item.displayType === '1'&&currentCasebg===item.displayType">
                {{item.resourceCaseContentEn}}
              </div>
              <!-- 图片 -->
              <div class="media-box" v-if="item.displayType === '2'&&currentCasebg===item.displayType">
                <img :src="item.fileUrl" style="width:100%">
              </div>
              <!-- 音频 -->
              <div class="media-box" v-if="item.displayType === '3'&&currentCasebg===item.displayType">
                <audio class="audio" controls :src="item.fileUrl" controlsList="nodownload"></audio>
              </div>
              <!-- 视频 -->
              <div class="media-box" v-if="item.displayType === '4'&&currentCasebg===item.displayType">
                <video class="video" controls :src="item.fileUrl">
                </video>
              </div>
            </div>
          </template>
          <div class="wait-btn" v-if="finishedFlag === '0'">等待教师开启本实训</div>
        </div>
        <!-- 互动答题 -->
        <div class="section" v-if="finishedFlag === '1'">
          <div class="title">
            互动答题
          </div>
          <template v-for="(item, index) in startData.resourceCaseBgList">
            <div class="content" :key="index">
              <!-- 文本 -->
              <div class="media-box" v-if="item.displayType === '1'">
                {{item.resourceCaseContentEn}}
              </div>
              <!-- 图片 -->
              <div class="media-box" v-if="item.displayType === '2'">
                <img :src="item.file_url" style="width:100%">
              </div>
              <!-- 音频 -->
              <div class="media-box" v-if="item.displayType === '3'">
                <audio class="audio" controls :src="item.file_url" controlsList="nodownload"></audio>
              </div>
              <!-- 视频 -->
              <div class="media-box" v-if="item.displayType === '4'">
                <video class="video" controls :src="item.file_url">
                </video>
              </div>
            </div>
          </template>
          <div class="file-box">
            报告文件<a>上传</a>
          </div>
          <div class="fill-box">
            <div class="fill-title">填写做题内容</div>
            <textarea name="fill" v-model="answerContent" cols="30" rows="10"></textarea>
          </div>
          <div class="submit-btn" v-if="startData.isHeadman === '1'" @click="updateAnswer">提交</div>
        </div>
        <!-- 已完成 -->
        <div class="section" v-if="finishedFlag === '3'">
          <div class="title">
            查看内容
          </div>
          <ul class="report-box">
            <li>
              报告文件<span class="right-arrow">案例分析文件.doc</span>
            </li>
            <li>
              所在小组得分<span class="right-arrow">90></span>
            </li>
            <li>
              查看其他组的打分<span class="right-arrow">></span>
            </li>
            <li>
              <div>答题内容</div>
              <textarea disabled name="fill" cols="30" rows="10">fsdfsdf</textarea>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { main, start, updateAnswer } from '@/api/student/training/interaction'
export default {
  name: 'interaction-start',
  data () {
    return {
      mainData: '',
      startData: '',
      finishedFlag: '', // 案例状态是否可进入个人打分，0：未开始；1：进行中；2：个人打分；3：已结束
      currentCasebg: 0,
      answerContent: '' // 答题内容
    }
  },
  components: {
  },
  async mounted () {
    await this.main()
    this.start()
  },
  methods: {
    // 案例背景切换
    tab (type) {
      this.currentCasebg = type
    },
    async main () {
      const res = await main({ interactionCaseId: this.$route.query.resourceCaseId })
      console.log(res)
      if (res.code === '200') {
        this.mainData = res.data
        this.currentCasebg = res.data.resourceCaseBgList[0].displayType
        this.finishedFlag = res.data.finishedFlag
      } else {
        this.$message.error(res.message)
      }
    },
    async start () {
      const res = await start(
        {
          lessonCaseId: this.mainData.lessonCaseId,
          resourceNodeId: this.mainData.currentNodeId
        }
      )
      console.log('==>', res)
      if (res.code === '200') {
        this.startData = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    // 更新提交作答
    async updateAnswer () {
      if (!this.answerContent) return this.$message.warning('请填写答题内容')
      let answerObj = { answer: this.answerContent, fileUrl: '', fileName: '' }
      const res = await updateAnswer(
        {
          caseAnswerId: this.startData.trainingInteractionAnswerVo.caseAnswerId, // 作答id
          result: JSON.stringify(answerObj) // 作答结果json
        }
      )
      if (res.code === '200') {
        this.$message({ type: 'success', message: '提交成功' })
      } else {
        this.$message.error(res.message)
      }
    },
    // 3 进入组长评分 2 进入个人评分
    nextFunc (id, state, sortIndex) {
      // state 0：未开始（灰，不可点）1：进行中（红）2：已完成（绿）
      if (state === '1') { // 进行中
        if (sortIndex === '-2') { // 个人评分
          this.$router.push(
            {
              path: 'interactionScore',
              query: {
                type: 'person',
                caseStuGroupId: this.mainData.caseStuGroupId // 学生分组id
              }
            }
          )
        }
      }
      if (state === '2') { // 已完成
        if (sortIndex === '-2') { // 个人评分
          this.$router.push(
            {
              path: 'interactionScore',
              query: {
                type: 'person',
                caseStuGroupId: this.mainData.caseStuGroupId // 学生分组id
              }
            }
          )
        } else { // 小组评分
          this.$router.push(
            {
              path: 'interactionScore',
              query: {
                type: 'group',
                lessonCaseId: this.mainData.lessonCaseId, // 课程案例id
                resourceNodeId: id // 环节id
              }
            }
          )
        }
      }
    }
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.interaction-start {
  .container {
    display: flex;
    justify-content: space-between;
    .box-left {
      width: 630px;
      background: #fff;
      padding: 15px;
      .section {
        .title {
          font-size: 14px;
          font-weight: bold;
          position: relative;
          .sm-group, .arrow {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 12px;
            font-weight: initial;
            color: #828282;
          }
        }
        .train-info {
          color: #BBBBBB;
          font-size: 14px;
          margin-top: 10px;
        }
        .content {
          color: #BBBBBB;
          font-size: 14px;
          padding: 20px 0;
          line-height: 1.2;
        }
        .card {
          border-radius: 20px;
          background: #f5f5f5;
          width: 455px;
          margin: 0 auto;
          .row {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .row-1{
            padding: 0 20px;
            line-height: 60px;
            border-bottom: 1px solid #D2D2D2;
          }
          .row-2{
            padding: 0 60px;
            line-height: 50px;
          }
        }
        .list-box {
          margin-top: 20px;
          ul {
            li {
              line-height: 60px;
              font-size: 14px;
              border-bottom: 1px solid #f5f5f5;
              padding: 0 10px;
              position: relative;
              cursor: pointer;
              &:hover {
                background: #f5f5f5;
              }
              .right-arrow {
                position: absolute;
                right: 10px;
              }
            }
          }
        }
      }
    }
    .box-right {
      width: 550px;
      min-height: 100%;
      background: #fff;
      padding: 15px;
      box-sizing: border-box;
      .title {
        font-size: 14px;
        font-weight: bold;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .tab {
          display: flex;
          .tab-item {
            width: 85px;
            line-height: 40px;
            border: 1px solid #D9D9D9;
            text-align: center;
            font-weight: initial;
            cursor: pointer;
            &.active {
              border: 1px solid #828282;
            }
          }
        }
        .time {
          font-size: 14px;
          color: #828282;
          position: absolute;
          right: 0;
          font-weight: normal;
        }
      }
      .content {
        color:#BBBBBB;
        font-size: 14px;
        line-height: 1.2;
      }
      .media-box {
        padding: 15px 0;
        .video, .audio {
          width: 100%;
        }
      }
      .file-box {
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;
        font-size: 14px;
        font-weight: bold;
        a {
          color: #009cf6;
          font-weight: normal;
        }
      }
      .fill-box {
        margin-top: 10px;
        .fill-title {
          font-size: 14px;
        }
        textarea {
          width: 100%;
          margin-top: 20px;
        }
      }
      .report-box {
        li {
          line-height: 70px;
          position: relative;
          .right-arrow {
            position: absolute;
            right: 0;
          }
          textarea {
            width: 100%;
            margin-top: 20px;
          }
        }
      }
      .wait-btn {
        width: 100%;
        line-height: 40px;
        border-radius: 10px;
        background: #bbbbbb;
        color: #fff;
        text-align: center;
        margin-top: 30px;
      }
      .submit-btn {
        width: 100%;
        line-height: 40px;
        border-radius: 10px;
        background: #009cf6;
        color: #fff;
        text-align: center;
        margin-top: 30px;
        cursor: pointer;
      }
    }
  }
}

</style>
